// 下面是菜单栏折叠部分的代码
$('.menufold').on('click', function () {
    $('.sidebar').toggleClass('side');
    $('.menufold').toggleClass('menufoldchange');
    $('.switch_page').toggleClass('switch_page_bigger');

})
$("#funcMenu").click(function () {
    $('.switch_page').eq(0).css("display", "none");
    $('.switch_page').eq(1).css("display", "none");
    $('.switch_page').eq(2).css("display", "none");
    $('.switch_page').eq(3).css("display", "none");
    $('.switch_page').eq(4).css("display", "none");
});

$("#menuone").click(function () {
    $('#displayRegion').addClass('displayRegionbg');
    $('.menuoneitem').slideToggle();
    $('.switch_page').eq(0).css("display", "block");
    $('.switch_page').eq(1).css("display", "none");
    $('.switch_page').eq(2).css("display", "none");
    $('.switch_page').eq(3).css("display", "none");
    $('.switch_page').eq(4).css("display", "none");
});

$("#menutwo").click(function () {
    $('.menuoneitemtwo').slideToggle();
    $('.switch_page').eq(1).css("display", "block");
    $('.switch_page').eq(0).css("display", "none");
    $('.switch_page').eq(2).css("display", "none");
    $('.switch_page').eq(3).css("display", "none");
    $('.switch_page').eq(4).css("display", "none");
});

$("#menuthree").click(function () {
    $('.menuoneitemthree').slideToggle();
    $('.switch_page').eq(2).css("display", "block");
    $('.switch_page').eq(0).css("display", "none");
    $('.switch_page').eq(1).css("display", "none");
    $('.switch_page').eq(3).css("display", "none");
    $('.switch_page').eq(4).css("display", "none");
});

$("#menufour").click(function () {
    $('.switch_page').eq(3).css("display", "block");
    $('.switch_page').eq(0).css("display", "none");
    $('.switch_page').eq(2).css("display", "none");
    $('.switch_page').eq(1).css("display", "none");
    $('.switch_page').eq(4).css("display", "none");
});
// 菜单栏折叠部分代码结束

// 布防监管页面显示
$('.switch_page').eq(4).css("display", "block");
$('.switch_page').eq(0).css("display", "none");
$('.switch_page').eq(2).css("display", "none");
$('.switch_page').eq(1).css("display", "none");
$('.switch_page').eq(3).css("display", "none");

$(function(){
    $('#checkmsg1').click(function(){
        $.post("/api_message",{id:1}, function(json){
            $("#defencename1").text(json.defencename);
            $("#alerttype1").text(json.alerttype);
            $("#alerttime1").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface1").text("TRUE");
            }else $("#iscaptureface1").text("FALSE");
            alert("查询成功！");
            });
    });
});

$(function(){
    $('#checkmsg2').click(function(){
        $.post("/api_message", {id:2}, function(json){
            $("#defencename2").text(json.defencename);
            $("#alerttype2").text(json.alerttype);
            $("#alerttime2").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface2").text("TRUE");
            }else $("#iscaptureface2").text("FALSE");
            alert("查询成功！");
            });
    });
});

$(function(){
    $('#checkmsg3').click(function(){
        $.post("/api_message", {id:3}, function(json){
            $("#defencename3").text(json.defencename);
            $("#alerttype3").text(json.alerttype);
            $("#alerttime3").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface3").text("TRUE");
            }else $("#iscaptureface3").text("FALSE");
            alert("查询成功！");
            });
    });
});

$(function(){
    $('#checkmsg4').click(function(){
        $.post("/api_message", {id:4}, function(json){
            $("#defencename4").text(json.defencename);
            $("#alerttype4").text(json.alerttype);
            $("#alerttime4").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface4").text("TRUE");
            }else $("#iscaptureface4").text("FALSE");
            alert("查询成功！");
            });
    });
});

$(function(){
    $('#checkmsg5').click(function(){
        $.post("/api_message", {id:5}, function(json){
            $("#defencename5").text(json.defencename);
            $("#alerttype5").text(json.alerttype);
            $("#alerttime5").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface5").text("TRUE");
            }else $("#iscaptureface5").text("FALSE");
            alert("查询成功！");
            });
    });
});

$(function(){
    $('#checkmsg6').click(function(){
        $.post("/api_message", {id:6}, function(json){
            $("#defencename6").text(json.defencename);
            $("#alerttype6").text(json.alerttype);
            $("#alerttime6").text(json.alerttime);
            if(json.iscaptureface==1){
                $("#iscaptureface6").text("TRUE");
            }else $("#iscaptureface6").text("FALSE");
            alert("查询成功！");
            });
    });
});

//下面是控制页面切换的代码
var switch_page_nuumber;
$('.switch_page').eq(0).show();
$('.switch_page').eq(1).hide();
$('.left_btn').click(function () {
    $('.left_btn').css("background-color", "#ff5566");
    $('.switch_page').eq(0).toggle();
    $('.switch_page').eq(1).toggle();
})
// 控制页面切换的代码结束

//下面是摄像头部分界面的js
//下面这部分代码对播放器进行初始化
var player = videojs('video_1', {
    autoplay: true,
    playbackRates: [0.5, 1, 1.5, 2],
    autoplay: true,
    muted: true,
    controls: true,
    height: 200,
    width: 300,
    loop: true,

});

//下面的代码实现模态框的控制
var modalVision = false;
function modalControl() {
    var modalBox = {};//js中的大括号表示一个对象，要属性和值或函数
    /*获取模态框*/
    modalBox.modal = document.getElementById("myModal");
    /*获得trigger按钮*/
    modalBox.closeBtn = document.getElementById("closeBtn");
    /*模态框显示*/
    modalBox.show = function () {
        console.log(this.modal);
        this.modal.style.display = "block";
    }
    /*模态框关闭*/
    modalBox.close = function () {
        this.modal.style.display = "none";
    }
    /*当用户点击模态框内容之外的区域，模态框也会关闭*/
    modalBox.outsideClick = function () {
        var modal = this.modal;
        modalVision = false;
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
    /*模态框初始化*/
    modalBox.init = function () {
        var that = this;
        if (modalVision == true) {
            that.show();
        }
        if (modalVision == false) {
            that.close();
        }
        this.closeBtn.onclick = function () {
            that.close();
            modalVision = false;
        }
        this.outsideClick();
    }
    modalBox.init();
}
//模态框控制的js代码结束

// 下面实现点击进入编辑按钮调用canvas
var click_three = document.getElementById("click_three");/*获取进入编辑按钮对象*/
var editWhether = false;//这个表示是否点击进入编辑
click_three.onmousedown = function () {
    $('#displayRegion').addClass('displayRegionbg');
    editWhether = !editWhether;
    if (editWhether) {
        click_three.value = "退出编辑";
    } else {
        click_three.value = "进入编辑";
    };
}

var canva = document.getElementById("myCanvas");//创建canvas画布
var cansText = canva.getContext("2d");//画的都是平面图
var cameraOne = document.getElementById("cameraOne");
var cameraOneClick = false;//这个变量表示是否点击了摄像头1，点击后就可以实现拖动

var displayRegion = document.getElementById("displayRegion");//获取画布div的对象
let cameraOmeImage = new Image();
cameraOmeImage.src = "img/camera.png";


//下面的函数实现设置画布的大小等于显示区域的大小
function setCanvas() {
    canva.width = displayRegion.clientWidth;
    canva.height = displayRegion.clientHeight;
    displayRegion.oncontextmenu = function () {
        return false;
    }
}


//这部分设置画布的宽度等于所在div的宽度

var canvaCameraXY = new Array();//这个数组用来保存摄像头的位置

var xDiscriminate = false;//用来表示鼠标的位置是否等于图标x位置
var yDiscriminate = false;//用来表示鼠标的位置是否等于图标y位置

function dragPaint(e) {//这个函数实现在画布上画出摄像头 

    canva.onmousemove = function (e) {//这个函数实现进入编辑从菜单栏拖出图标

        if (e.button == 0) {
            let x = e.offsetX;//获取当前鼠标在画布内的位置
            let y = e.offsetY;
            if (cameraOneClick) {
                cansText.clearRect(0, 0, canva.width, canva.height);//清除画布
                cansText.drawImage(cameraOmeImage, x - 25, y - 25, 50, 50);
                canvaCameraXY[0] = x;
                canvaCameraXY[1] = y;
            }
        };

    }
    canva.onmouseup = function (e) {//鼠标抬起清除绑定事件
        if (e.button == 0) {
            canva.onmousemove = null;
            canva.onmouseup = null;
            cameraOneClick = false;//从菜单栏拖出图标结束
        };

    };//从菜单栏拖出图标函数结束

    canva.onmousedown = function (e) {//这部分函数实现对画布中的摄像头拖动


        console.log("在运行");

        let a = e.button;
        canva.onmousemove = function (e) {
            let x = e.offsetX;
            let y = e.offsetY;

            //下面两个函数实现判断鼠标是否点击了画布中的图标
            (x < (canvaCameraXY[0] + 25) && x > (canvaCameraXY[0] - 25)) ? xDiscriminate = true : xDiscriminate = false;
            (y < (canvaCameraXY[1] + 25) && y > (canvaCameraXY[1] - 25)) ? yDiscriminate = true : yDiscriminate = false;
            if (a == 0) {
                if (xDiscriminate && yDiscriminate && editWhether) {
                    cansText.clearRect(0, 0, canva.width, canva.height);
                    cansText.drawImage(cameraOmeImage, x - 25, y - 25, 50, 50);
                    canvaCameraXY[0] = x;
                    canvaCameraXY[1] = y;
                };
            }
            canva.onmouseup = function () {
                if (a == 0) {
                    canva.onmousemove = null;
                    canva.onmouseup = null;
                };

            };
        }
        if (a == 0) {
            if (xDiscriminate && yDiscriminate && (!editWhether)) {//如果退出编辑且鼠标在图案附近则显示模态框
                modalVision = true;
                modalControl();
            };
        };
    }


}
//下面的代码获得鼠标是否点击菜单栏的摄像头，是否要进行拖出图标
cameraOne.onmousedown = function (e) {
    if (e.button == 0) {
        cameraOneClick = true;
        if (editWhether) {
            setCanvas();
            dragPaint();
        };
    };
}
cameraOne.onmouseup = function (e) {

    if (e.button == 0) {
        cameraOneClick = false;
    };
}
//canvas画布的代码结束


//模态框按钮控制代码
var equipment = document.getElementById("equipment");/*获取设备对象*/
var affirm = document.getElementById("affirm");/*获取确认按钮对象*/
var videoPlayOne = document.getElementById("videoPlayOne");/*获取播放器div对象*/
var equipmentOpen = false;//这个用来表示是否选中设备
affirm.onclick = function () {
    equipmentOpen = equipment.checked;
    if (equipmentOpen) {
        modalVision = false;
        modalControl();
        videoPlayOne.style.display = "block";
        player.play();
    }
};

//下面实现点击播放器关闭按钮即可以对播放器实现关闭功能。
var closeVideo = document.getElementById("closeVideo");/*获取播放器div关闭按钮对象*/
closeVideo.onclick = function () {
    videoPlayOne.style.display = "none";
    player.pause();
};
//模态框按钮控制代码结束

//摄像头部分js代码结束

//入侵报警界面代码
var playerone = videojs('example_video_1', {
    muted: true,
    controls: true,
    height: 200,
    width: 300,
    loop: true,
}, console.log("video_1初始化成功！"));

var playertwo = videojs('example_video_2', {
    playbackRates: [0.5, 1, 1.5, 2],
    autoplay: true,
    muted: true,
    controls: true,
    height: 200,
    width: 300,
    loop: true,
}, console.log("video_2初始化成功！"));

var playerthree = videojs('example_video_3', {
    muted: true,
    controls: true,
    height: 200,
    width: 300,
    loop: true,
}, console.log("video_3初始化成功！"));
var playerfour = videojs('example_video_4', {
    playbackRates: [0.5, 1, 1.5, 2],
    muted: false,
    controls: true,
    height: 200,
    width: 300,
    loop: true,
}, console.log("video_4初始化成功！"));

/* 下面是控制触发警报的js函数*/
var touchAlarm = document.getElementById("touchAlarm");/*获取折叠的菜单栏*/
touchAlarm.onmousedown = function (e) {
    if ((e.button == 0) && ($('.switch_page').eq(1).css("display") == "block")) {
        playerthree.requestFullscreen();
        playerthree.play();
    }
}
/* 控制触发警报的js函数结束*/
/* 下面是控制历史回放的js函数*/
var rePlay = document.getElementById("rePlay");/*获取折叠的菜单栏*/
rePlay.onmousedown = function (e) {
    if (e.button == 0) {
        playerfour.play();
    }
}
/* 控制历史回放的js函数结束*/

//入侵报警界面代码结束

//下面是门禁界面代码
var playeroneCyber = cyberplayer("playercontainerone").setup({
    width: 300,
    height: 200,
    file: "http://vjs.zencdn.net/v/oceans.mp4", // <—rtmp直播地址
    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数
    autostart: false,
    stretching: "uniform",
    volume: 100,
    controls: true,
    rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
    },
    ak: "5e2edf12a8f14eb690571e517add5dda" // 公有云平台注册即可获得accessKey
}, console.log("video_1初始化成功！"));

var playertwoCyber = cyberplayer("playercontainertwo").setup({
    width: 300,
    height: 200,
    file: "http://vjs.zencdn.net/v/oceans.mp4", // <—rtmp直播地址
    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数
    autostart: false,
    stretching: "uniform",
    volume: 100,
    controls: true,
    rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
    },
    ak: "5e2edf12a8f14eb690571e517add5dda" // 公有云平台注册即可获得accessKey
}, console.log("video_2初始化成功！"));

var playerthreeCyber = cyberplayer("playercontainerthree").setup({
    width: 300,
    height: 200,
    file: "http://vjs.zencdn.net/v/oceans.mp4", // <—rtmp直播地址
    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数
    autostart: false,
    stretching: "uniform",
    volume: 100,
    controls: true,
    rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
    },
    ak: "5e2edf12a8f14eb690571e517add5dda" // 公有云平台注册即可获得accessKey
}, console.log("video_3初始化成功！"));

var playerfourCyber = cyberplayer("playercontainerfour").setup({
    width: 300,
    height: 200,
    file: "http://vjs.zencdn.net/v/oceans.mp4", // <—rtmp直播地址
    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数
    autostart: false,
    stretching: "uniform",
    volume: 100,
    controls: true,
    rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
    },
    ak: "5e2edf12a8f14eb690571e517add5dda" // 公有云平台注册即可获得accessKey
}, console.log("video_4初始化成功！"));

var playerfiveCyber = cyberplayer("playercontainerfive").setup({
    width: 700,
    height: 400,
    file: 'http://vjs.zencdn.net/v/oceans.mp4', // <—rtmp直播地址
    minBufferLength: 60, // 通过minBufferLength配置项来设置最大缓冲秒数
    autostart: false,
    stretching: "uniform",
    volume: 100,
    controls: true,
    rtmp: {
        reconnecttime: 5, // rtmp直播的重连次数
        bufferlength: 1 // 缓冲多少秒之后开始播放 默认1秒
    },
    ak: "5e2edf12a8f14eb690571e517add5dda" // 公有云平台注册即可获得accessKey
}, console.log("video_5初始化成功！"));

//下面的代码实现模态框的控制
var modalVision = false;
function modalControlGuard() {
    var modalBox = {};//js中的大括号表示一个对象，要属性和值或函数
    /*获取模态框*/
    modalBox.modal = document.getElementById("myModalGuard");
    /*获得trigger按钮*/
    modalBox.closeBtn = document.getElementById("closeBtnGuard");
    /*模态框显示*/
    modalBox.show = function () {
        console.log(this.modal);
        this.modal.style.display = "block";
    }
    /*模态框关闭*/
    modalBox.close = function () {
        this.modal.style.display = "none";
    }
    /*当用户点击模态框内容之外的区域，模态框也会关闭*/
    modalBox.outsideClick = function () {
        var modal = this.modal;
        modalVision = false;
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
                playerseven.pause();
            }
        }
    }
    /*模态框初始化*/
    modalBox.init = function () {
        var that = this;
        if (modalVision == true) {
            that.show();
        }
        if (modalVision == false) {
            that.close();
            playerseven.pause();
        }
        this.closeBtn.onclick = function () {
            that.close();
            modalVision = false;
            playerseven.pause();
        }
        this.outsideClick();
    }
    modalBox.init();

}
//模态框控制的js代码结束

/* 下面是控制触发警报的js函数*/
var monitorOne = document.getElementById("monitorOne");/*获取折叠的菜单栏*/
monitorOne.onmousedown = function (e) {
    if (e.button == 0 && ($('.switch_page').eq(2).css("display") == "block")) {
        modalVision = true;
        modalControlGuard();
        playerseven.play();
    }
}
/* 控制触发警报的js函数结束*/
//门禁界面代码结束
